<template>
	<div id="page">
		<el-tabs v-model="activeName" @tab-click="tabclick">
		    <el-tab-pane label="我的关注" name="first">

				<div class="fan-item" v-for="fanItem in fans1" v-bind:key="fanItem.id">
					<div class="fan-text-icon">{{fanItem.lastName.substring(fanItem.lastName.length-1)}}</div>
					<div class="fan-text">{{fanItem.lastName}}({{fanItem.login}})</div>
					<el-button type="danger" icon="el-icon-delete" circle @click="deleteFan(fanItem)"></el-button>
				</div>
		
			</el-tab-pane>
		    <el-tab-pane label="我的粉丝" name="second">
				<div class="fan-item" v-for="fanItem in fans2" v-bind:key="fanItem.id">
					<div class="fan-text-icon">{{fanItem.lastName.substring(fanItem.lastName.length-1)}}</div>
					<div class="fan-text">{{fanItem.lastName}}({{fanItem.login}})</div>
					
				</div>
				
			</el-tab-pane>
		  </el-tabs>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				activeName:'first',
				fans1:[],
				fans2:[]
			}
			
		},
		methods:{
			loadFans1(){
				this.$http.get("/api/fans/myfavorite",{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					console.log("获取我关注的",result);
					if(result.status==200){
						this.fans1=result.data.content;
					}
				})
			},
			loadFans2(){
				this.$http.get("/api/fans/myfans",{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					console.log("获取关注我的",result);
					if(result.status==200){
						this.fans2=result.data.content;
					}
				})
			},
			tabclick(e){
				console.log("标签页点击",e);
			},
			deleteFan(fanItem){
				this.$http.delete("/api/fans/delete?loginName="+fanItem.login,{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					if(result.status==401){
						this.$router.push("login");
					}else if(result.status==200){
						this.loadFans1();
					}
				}).catch((error)=>{
					
				})
			}
		},
		mounted(){
			this.loadFans1();
			this.loadFans2();
		}
	}
</script>

<style scoped>
	#page{
		font-weight: 600;
		width:1080px;
		max-width:1080px;
		margin:5px auto;
	}
	
	.fan-item{
		display:flex;
		flex-direction: row;
		justify-content: flex-start;
		padding:10px;
		align-items: center;
		border:1px solid rgba(100,100,100,0.1);
		box-shadow:1px 1px 1px rgba(100,100,100,0.1);
		margin-top:2px;
		}
		.fan-item .fan-text{
			flex:1;
			text-align: left;
		}
	.fan-item .el-icon-delete{
		width:80px;
	}
	.fan-item .fan-text-icon{
		width:50px;
		height:50px;
		line-height: 50px;
		border-radius: 50%;
		text-align: center;
		font-weight: 600;
		background-color: #007AF9;
		color:#fff;
		margin-right:5px;
	}
</style>
